<!-- 底部按钮 -->
<template>
  <TButtonGroup :styles="{ display: 'block' }">
    <template v-if="orderInfo.orderState === OrderStateEnum.NOPAYMENT">
      <TButton
        v-if="payWay.weChatPayEnabled"
        text="立即支付"
        type="primary"
        :custom-style="{ marginBottom: '20rpx' }"
        @click="emit('openPay')"
      />
      <TButton
        text="取消订单"
        :custom-style="{
          marginBottom: '20rpx',
          backgroundColor: '#FFF',
        }"
        @click="emit('closeOrder')"
      />
    </template>
    <template v-if="orderInfo.orderState === OrderStateEnum.CLOSED">
      <TButton
        text="重新缴费"
        type="primary"
        :custom-style="{ marginBottom: '20rpx' }"
        @click="emit('resetPay')"
      />
    </template>
  </TButtonGroup>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { propTypes } from '@/utils/propTypes';
  import { getPayConfig } from '@/api/membership';
  import { type PayWayData } from '@/api/membership/types';
  import { OrderStateEnum } from '@/enums/orderEnum';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';

  const props = defineProps({
    orderInfo: propTypes.object.def({}),
  });

  const payWay = ref({} as PayWayData);
  const getPayData = function () {
    if (props.orderInfo.orderState !== OrderStateEnum.NOPAYMENT) return;
    getPayConfig().then((res: PayWayData) => {
      payWay.value = res;
    });
  };
  getPayData();

  const emit = defineEmits(['openPay', 'closeOrder', 'resetPay']);
</script>
<style lang="scss" scoped>
  $color-primary: #2878ff;

  .color1 {
    color: $color-primary;
  }
</style>
